<template>
  <PageWrapper title="修改当前商家信息" content="地址信息用于用户售后寄回地址！">
    <div class="py-8 bg-white flex flex-col justify-center items-center">
      <BasicForm @register="register" />
      <div class="flex justify-center">
        <a-button @click="resetFields"> 重置 </a-button>
        <a-button class="!ml-4" type="primary" @click="handleSubmit"> 确认 </a-button>
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { PageWrapper } from '@/components/Page';
import { BasicForm, useForm } from '@/components/Form';
import { areaListApi, getShopApi, saveShopApi } from '@/api/sys/sysData';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
import { onMounted } from "vue";
import { formSchema } from './pwd.data';
import util from "@/utils/util";

defineOptions({ name: 'ChangePassword' });

const [register, { validate, resetFields, setFieldsValue, resetSchema }] = useForm({
  size: 'large',
  baseColProps: { span: 24 },
  labelWidth: 100,
  showActionButtonGroup: false,
  schemas: formSchema,
});



async function handleSubmit() {
  try {
    const values = await validate();
    if (util.isNotEmpty(values.companyAreasArr)) {

      values.companyAreas = values.companyAreasArr.join(",");
      values.shopProvinceId = values.companyAreasArr[0];
      values.shopCityId = values.companyAreasArr[1];
      values.shopDistrictId = values.companyAreasArr[2];
    }
    if (util.isNotEmpty(values.qrCodeArr)) {
      values.qrCode = values.qrCodeArr.join(",");
    }
    // TODO custom api

    saveShopApi(values).then(res => {
      if (res.code == 200) {
        createMessage.success(`操作成功!`);
      }
    })

  } catch (error) {
    console.error(error);
  }
};

onMounted(() => {
  initData()
})

function initData() {
  getShopApi(null).then(res => {
    if (util.isNotEmpty(res.data.companyAreas)) {
      res.data.companyAreasArr = res.data.companyAreas.split(",");
    }
    if (util.isNotEmpty(res.data.qrCode)) {
      res.data.qrCodeArr = res.data.qrCode.split(",");
    }
    // console.log("--res.data:",res.data)

    formSchema.forEach(r => {
      if (r.component === 'ApiCascader') {
        r.componentProps.displayRenderArray = [res.data.shopProvinceName, res.data.shopCityName, res.data.shopDistrictName];
      }
    });

    resetSchema(formSchema);
    setFieldsValue(res.data);

  })
}

</script>
